import cssVars from 'css-vars-ponyfill'
// https://blog.csdn.net/MrWangJB/article/details/121469179
// https://juejin.cn/post/6844904122643120141#heading-10
export const themeList = {
  light: {
    Theme: '#f9f9f9',
    BorderTheme: '#f1f1f1',
    ThemeFontColor: '#333333',
    ThemeslideMenuColor: '#f6d5e5',
    activeColor: '#409eff'
  },
  dark: {
    Theme: 'rgb(51, 50, 50)',
    BorderTheme: '#d6d6d6',
    ThemeFontColor: '#f1f1f1',
    ThemeslideMenuColor: 'rgba(13, 194, 226, 0.548)',
    activeColor: '#f6d5e5'
  }
}

// 获取对应的主题色值
export const getThemeMap = (theme) => {
  return {
    'font-color': themeList[theme].ThemeFontColor,
    'theme-border-color': themeList[theme].BorderTheme,
    'theme-bg': themeList[theme].Theme,
    'theme-slide-menu-color': themeList[theme].ThemeslideMenuColor,
    'theme-active-color': themeList[theme].activeColor
  }
}
// 设置主题色值
export const setTheme = (theme = 'light') => {
  const themeMap = getThemeMap(theme)
  const body = document.body
  Object.keys(themeMap).forEach((key) => {
    body.style.setProperty(`--${key}`, themeMap[key])
  })
  /*
var(--font-color)
var(--theme-border-color)
var(--theme-bg)
var(--theme-slide-menu-color)
var(--theme-active-color)
*/

  // 实现兼容方案
  /*  watch: true,添加、删除、修改 <link> 或 <style> 元素的禁用或 href 属性时，ponyfill 将自行调用
    variables: themeMap,variables自定义属性名/值对的集合
    onlyLegacy: false,false默认将 css 变量编译为浏览器识别的 css 样式；true当浏览器不支持css变量的时候将css变量编译为识别的css
 */
  cssVars({
    watch: true,
    variables: themeMap,
    onlyLegacy: false
  })
}
